html, body {
    width: 100%;
    height: 100%;
}

.header-container{
    top: 0;
    /* bottom: 0; */
    background-color: rgba(222, 24, 27, 0.9);    
}
.header-container,
.tabbar-container{
    /* !没有出现效果，单词拼写错误 */
    /* display: flex; */
    position: fixed;
    left: 0;
    height: 2.5rem;
    width: 100%;
    z-index: 1000;
}
.main-container{
    padding: 2.5rem 0;
    background-color: #eee;
}
.nav-container{
    /* display: flex;
    flex-wrap: wrap; */
    padding: 0.8rem 0 0.4rem;
    background-color: #fff;
    margin-bottom: 0.5rem;
}
.tabbar-container{
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);
}
.recommend-container{

}


.navbar{
    display: flex;
    /* justify-content: center; */
    height: 100%;
    width: 100%;
}
/* ！flex居中应该到上级写居中 */
.navbar-left,
.navbar-right,
.navbar-center{
    display: flex;
    height: 100%;
    /* ！单个内容用flex居中，和分剩余空间 */
    justify-content: center;
    align-items: center;
}
.navbar-left,
.navbar-right{
    width: 2.2rem;
}
.navbar-center{
    flex: 1;
}
/* ！后代选择器加字体调节 */
.navbar-left .iconfont,
.navbar-right .iconfont{
   color: #fff;
   font-size: 1.2rem;
}
.searchBox{
    display: flex;
    border-radius: 0.8rem;
    height: 1.6rem;
    width: 100%;
    /* justify-content: center; */
    background-color: #fff;
}
.searchBox-prepend,
.searchBox-append{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
}
.searchBox-input{
    flex: 1;
}
.searchBox-prepend .iconfont,
.searchBox-append .iconfont{
    font-size: 0.9rem;
    font-weight: bold;
}
.nav{
     /* ！flex布局，超过就换行 */
    /* ！内容多，且整体不用垂直居中，不用设置高度。高度由里面内容撑开 */
    display: flex;
    flex-wrap: wrap;
}
.nav-item{
    /* ！因为高度由里面内容撑开，不能再上级用flex居中 ,且里面内容需设置高度*/
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    width: 20%;
    margin-bottom: 0.4rem;
}
.nav-link{
    /* ！因为高度由里面内容撑开，不能再上级用flex居中 ,容器设置为块级元素用 text-align: center;居中 */
    display: block;
    text-align: center;
}
.nav-link .nav-img{
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.2rem;
}
.nav-link .nav-text{
    display: block;
    /* text-align: center; */
}
.recommend{
    display: flex;
    flex-wrap: wrap;
    /* 涉及到flex位置问题都到上级设置 */
    justify-content: space-between;
}
.recommend-item{
    display: flex;   
    width: 49.333%;
    margin-bottom: 0.25rem;    
    background-color: #fff;
}
.recommend-link{
    /* ！a标签为行内元素，改块级元素能控制宽高 */
    display: block;
    width: 100%;
    height: 100%;
}
.recommend-pic{
    /* !因为高度由内容撑起，只设置内容 */
    /* height: ; */
    width: 100%;
    margin-bottom: 0.4rem;
}

.recommend-name{
    /* margin-top: 0.4rem; */
}
.recommend-img{
    width: 100%;
    height: 9.25rem;
}
.recommend-info,
.recommend-name,
.recommend-origPrice{
    padding: 0 0.25rem;
    margin-bottom: 0.4rem;
}
.recommend-name{
    overflow: hidden;
    /* ? */
    white-space: nowrap;
    text-overflow: ellipsis;
}
.recommend-info{
    /* ！分两边布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.recommend-price-num {
    font-size: 20px;
}
/* ！字体大小随像素比之改动 */
[data-dpr="2"] .recommend-price-num {
    font-size: 40px;
}
[data-dpr="3"] .recommend-price-num {
    font-size: 60px;
}
.recommend-origPrice{
    /* position: absolute; */
    color: #ccc;
}
.recommend-price {
    color: #e61414;
}
.recommend-price-num {
    font-size: 20px;
}
.tabbar{
    display: flex;
    /* ！flex布局中要经常设置宽高 ，不然不能居中*/
    height: 100%;
}
.tabbar-item{
    display: flex;    
    justify-content: center;
    align-items: center;
    width: 25%;
}
.tabbar-link{
    display: flex;
    /* flex方向 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.tabbar-link .iconfont{
    font-size: 1.2rem;
}
